<template>
  <div class="roleManage">
    <header class="d-flex justify-content-between">
      <div class="left d-flex">
        <t-input v-model="formItem.roleName" icon="magnify" placeholder="角色名称/角色ID" clearable>
        </t-input>
        <t-button icon="filter-variant" @click="addSearch"></t-button>
      </div>
      <div class="right">
        <t-button type="primary" icon="plus-circle-outline" @click="add">新增角色</t-button>
        <t-dropdown :visible="visible" trigger="custom">
          <t-button type="outline-secondary" icon="view-parallel" @click="showroleList"></t-button>
          <t-dropdown-menu slot="list">
            <t-checkbox-group v-model="selectedRole">
              <div v-for="(item,index) in roleList" :key="index">
                <t-checkbox :label="item"></t-checkbox>
              </div>
            </t-checkbox-group>
            <t-button type="primary" @click="roleConfirm">确定</t-button>
          </t-dropdown-menu>
        </t-dropdown>
      </div>
    </header>
    <div v-show="ifShow" class="search">
      <div class="d-flex condition">

        <div>
          <p>状态</p>
          <t-select v-model="formItem.state" placeholder="请选择" clearable>
            <t-option v-for="(item, index) in stateList" :key="index" :value="item.value">
              {{ item.label }}
            </t-option>
          </t-select>
        </div>
      </div>
      <div class="button d-flex justify-content-end">
        <t-button @click="reset">重置</t-button>
        <t-button type="primary" style="margin-left:10px;" @click="search">查询</t-button>
      </div>
    </div>
    <t-table :columns="columns" :data="data" :all-ellipsis="true" :no-data-text="noData" line style="margin-top:5px;">
    </t-table>
    <div class="page d-flex justify-content-between">
      <span>共{{ pagination.total }}条</span>
      <t-pager :total="pagination.total" :current.sync="pagination.currentPage" :page-size.sync="pagination.size" :sizer-range="pagination.sizes"
               show-elevator show-sizer
               @on-size-change="onSizeChange"
               @on-change="onChange"></t-pager>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import RoleOperation from './RoleOperation.vue'

export default {
  data() {
    return {
      columns: [
        {
          title: '角色ID',
          key: 'ID'
        },
        {
          title: '角色名称',
          key: 'NAME'
        },
        {
          title: '角色编码',
          key: 'MODULE_CODE'
        },
        {
          title: '创建时间',
          key: 'CREATE_DATE'
        },
        {
          title: '备注',
          key: ''
        },
        {
          title: '状态',
          key: 'STATE',
          render: (h, params) => {
            const state = params.row.STATE === 0 ? '禁用' : '启用'
            return h('span', state)
          }
        },
        {
          title: '操作',
          render: (h, params) => {
            return h(RoleOperation, {
              props: {
                dataList: params.row
              },
              on: {
                delete: () =>  {
                  this.getRoleList()
                }
              }
            })
          },
          fixed: 'right'
        }
      ],
      data: [],
      obj:{},
      noData: "<img src='/static/images/noData.png'><p style='margin-top:10px;'>查询无数据</p>",
      formItem: {
        roleName: '',
        roleId: '',
        state: ''
      },
      stateList: [
        {
          value: 0,
          label: '禁用'
        },
        {
          value: 1,
          label: '启用'
        }
      ],
      ifShow: false,
      visible: false,
      selectedRole: ['角色ID', '角色名称', '角色编码', '创建时间', '备注', '状态'],
      roleList: ['角色ID', '角色名称', '角色编码', '创建时间', '备注', '状态'],
      pagination: {
        currentPage: 1,
        sizes: [10, 15, 20],
        size: 10,
        total: 0
      },
      roleName: ''
    }
  },



  created() {
    this.getRoleList()
    this.obj = [...this.columns]
  },

  methods: {

    // 搜索
    search() {
      this.getRoleList()
    },

    add() {
        this.$router.push('/roleManage/addAndEdit/')
    },
    async getRoleList() {
      this.http.$http.post(this.services.QUERY_MENU_LIST, {
        bo: 'user',
        bc: 'USER_ROLE',
        condition: JSON.stringify({
          IDNAME: {
            cond_type: 'OR',
            NAME: {
              cond_type: 'LIKE',
              value: this.formItem.roleName,
              name: 'NAME'
            },
            ID: {
              cond_type: '=',
              value: this.formItem.roleId,
              name: 'ID'
	          }
          },
          MODULE_CODE: {
            cond_type: 'LEFT LIKE',
            value: this.modulecode,
            name: 'MODULE_CODE'
          },
          FUNC_TYPE: {
            cond_type: '=',
            value: 'E',
            name: 'FUNC_TYPE'
          },
          STATE: {
            cond_type: '=',
            value: this.formItem.state,
            name: 'STATE'
          }
        }),
        order_by: JSON.stringify([{ ORDER_TYPE: 'DESC', NAME: 'ID' }]), // 排序
        begin: (this.pagination.currentPage - 1) * this.pagination.size,
        row: this.pagination.size
      }).then(res => {
        this.data = res.data.RESULT.DATALIST
        this.pagination.total = res.data.RESULT.TOTAL_CNT
      })
    },
    // 显示新增搜索条件
    addSearch() {
      this.ifShow = !this.ifShow
    },
    // 显示角色列表
    showroleList() {
      this.visible = true
    },
    // 自定义表单列表
    roleConfirm() {
      
      this.columns = [...this.obj]
      let difference = this.roleList.concat(this.selectedRole).filter(v => this.roleList.includes(v) && !this.selectedRole.includes(v))
      for (const v of difference) {
        for (const v1 of this.columns) {
          if (v === v1.title) {
            const index = this.columns.indexOf(v1)
            this.columns.splice(index, 1)
          }
        }
      }
      this.visible = false
    },
    // 重置表单
    reset() {
      this.formItem = {
        roleName: '',
        roleId: '',
        state: ''
      }
    },
    onSizeChange(val) {
      this.pagination.size = val
      this.getRoleList()
    },
    onChange(val) {
      this.pagination.currentPage = val
      this.getRoleList()
    }
  }
}
</script>
<style lang="scss" scoped>
.roleManage {
  padding: 10px;
  header {
    .left {
      input {
        width: 300px;
      }
      .btn {
        margin-left: 10px;
      }
    }
  }
  .search {
    background: #F8F9FA;
    padding: 10px 30px;
    margin: 5px 0;
    .condition {
      > div {
        margin: 0 10px;
        p {
          margin: 0 0 3px 0;
        }
        input,.select {
          width: 245px;
        }
     }
    }
    .button {
      margin-top: 10px;
      .btn {
        width: 96px;
      }
    }
  }
  .page {
    margin-top: 20px;
  }
}
</style>

